<script lang="ts" setup>
import img1 from '../pic/img-1.png';
import img2 from '../pic/img-2.png';
import img3 from '../pic/img-3.png';
import img4 from '../pic/img-4.png';
import img5 from '../pic/img-5.png';
import img6 from '../pic/img-6.png';

import { GuidePopup } from './GuidePop.vue';

const list = reactive([
  { pic: img1, name: 'Cash Craze: Casino Slots Games', tip: 'Casual Joy Games', type: '4,5' },
  { pic: img2, name: 'Charge Buffalo Slot-TaDa Jogos', tip: 'FUFAFA TECHNOLOGY LTD CO.', type: '4,5' },
  { pic: img3, name: 'Jackpot Magic Slots', tip: 'Big Fish Games', type: '2,6' },
  { pic: img4, name: 'Diamond Slot - Slot Game', tip: 'International Games System Co., Ltd.', type: '3,9' },
  { pic: img5, name: 'Bônus Bingo Cassino-TaDa Jogo', tip: 'FUFAFA TECHNOLOGY LTD CO.', type: '4,4' },
  { pic: img6, name: 'Infinity Slots - Casino Games', tip: 'Murka Games Limited', type: '4,5' },
]);
</script>

<template>
  <div>
    <header class="subtitle">
      <h2>
        Jogos semelhantes
      </h2>
      <i class="i-ri:arrow-right-line" />
    </header>
    <div class="grid grid-cols-2 gap-6">
      <div v-for="(i, k) in list" :key="k" @click="GuidePopup.open()">
        <div class="flex flex-1 gap-3 overflow-hidden">
          <img :src="i.pic" class="h-14 w-14 rounded-2">
          <div class="text-3.5 text-sys-layer-e">
            <div class="whitespace-nowrap">
              {{ i.name }}
            </div>
            <div class="whitespace-nowrap">
              {{ i.tip }}
            </div>
            <div class="whitespace-nowrap">
              <div class="inline-flex items-center">
                <span>{{ i.type }}</span>
                <i class="i-ri:star-fill text-#01875F">star</i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mt-5 text-sys-layer-d">
      <i class="i-material-symbols:flag-outline-rounded">flag</i>
      Sinalizar como impróprio
    </div>
  </div>
  <GuidePopup.PresetComponent />
</template>
